<template>
	<view class="container">
		<view class="switch-view">
			<view>
				请扫描巡检卡或选择巡检对象
			</view>
			<u-switch v-model="value" size="30"></u-switch>
		</view>
		
		<view v-if="value">
			<view v-for="(item, index) in list" :key="index" @click="itemClick(item)" class="item">
				<view>
					{{item.name}}({{item.type}})
				</view>
				<u-icon name="arrow-right" color="#A6A6A6" :size="18"></u-icon>
			</view>
		</view>
		<view v-else-if="!value && scanList.length > 0">
			<view v-for="(item, index) in scanList" :key="index" @click="itemClick(item)" class="item">
				<view>
					{{item.name}}({{item.type}})
				</view>
				<u-icon name="arrow-right" color="#A6A6A6" :size="18"></u-icon>
			</view>
		</view>
		<view v-else class="scan-view">
			<view class="scan" @click="scanClick">
				<u-icon name="scan" :size="180"></u-icon>
			</view>
		</view>

	</view>
</template>

<script>
	import { getXjTargetClass } from '@/api/xj.js'
	export default {
		data() {
			return {
				list: [],
				scanList: [],
				value: false
			}
		},
		onLoad(options) {
			console.log(options);
			const params = {
				pageNum: 0,
				pageSize: 99,
			}
			this.getList(params);
		},
		methods: {
			getList(params) {
				uni.showLoading({})
				getXjTargetClass(params).then(res => {
					console.log(res);
					uni.hideLoading();
					this.list = res.data.content;
				}).catch(err => {
					uni.hideLoading();
				})
			},
			
			itemClick(item) {
				this.$u.route({
					type: 'redirectTo',
					url: '/pages_operate/xj/xj-project-page',
					params: {
						targetClassId: item.id
					}
				})
			},
			
			scanClick() {
				console.log('scan');
				let that = this;
				uni.scanCode({
				    onlyFromCamera: true,
				    success: function (res) {
				        console.log('条码类型：' + res.scanType);
				        console.log('条码内容：' + res.result);
						if (res.result.indexOf('XJ.') !== -1) {
							const params = {
								pageNum: 0,
								pageSize: 99,
								cardCode: res.result.substring(3),
							};
							that.getScanList(params);
						} else {
							that.$u.toast('请扫描巡检二维码');
						}
				    }
				});
			},
			
			getScanList(params) {
				uni.showLoading({})
				getXjTargetClass(params).then(res => {
					console.log(res);
					uni.hideLoading();
					this.scanList = res.data.content;
					if (res.data.content.length === 0) {
						this.$u.toast('没有巡检信息');
					}
				}).catch(err => {
					uni.hideLoading();
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $app-page-bg-color;
		height: 100%;
	}
	
	.container{
		height: 100%;
		padding-left: $app-page-padding;
		padding-right: $app-page-padding;
		display: flex;
		flex-direction: column;
		
		.switch-view{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			margin-top: 50rpx;
			background-color: #F0F0F0;
			padding: 30rpx;
			color: $app-font-color;
			font-size: $app-font-size-lg;
		}
		
		.scan-view{
			flex-grow: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			.scan{
				width: 300rpx;
				height: 300rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50%;
				border: 2px solid #E8E8E8;
			}
		}
	}
	
	.item{
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-left: 35rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		padding-right: 35rpx;
		margin-top: 30rpx;
		margin-bottom: 30rpx;

		.title {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 65rpx;
		}
	}
</style>
